﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div id="routineinspectionItemListTable" class="main-content">
    <h3 class="page-title">点检项目管理Routine check item management</h3>

    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">条件查询Condition query</p>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="fa fa-angle-up"></i></button>
            </div>
        </div>
        <div class="panel-body container-fluid">
            <div class="row">
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">点检项目内容Routine check item content</span>
                        <input type="text" class="form-control" v-model="searchModel.queryName" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">设备类型Equipment type</span>
                        <select class="form-control" v-model="searchModel.queryTypeID">
                            <option v-for="(value, key, idx) in typeDictionary" v-bind:value="value">{{key}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">是否禁用Whether Disable</span>
                        <select class="form-control" v-model="searchModel.queryIsDisable">
                            <option v-for="(value, key, idx) in isDisableDictionary" v-bind:value="value">{{key}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <br />
                    <button class="btn btn-default btn-sm" v-on:click="SearchReset">
                        <i class="fa fa-eraser"></i> 清空empty
                    </button>
                    <button class="btn btn-default btn-sm" v-on:click="SearchItem">
                        <i class="fa fa-search"></i> 查询query
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- TABLE  -->
    <div class="panel">
        <div class="panel-body">
            <button class="btn btn-primary" v-on:click="AddItem">
                <i class="fa fa-plus"></i> 新增点检项目Add a routine check item
            </button>
            <br />
            <br />
            <table class="table table-striped" v-if="isNotEmptyObject(pageModel.results)">
                <thead>
                    <tr>
                        <td colspan="5">
                            <div class="form-inline text-right">
                                <label class="control-label">每页记录数Records per page：</label>
                                <select class="form-control input-sm" style="width:auto;" v-model="pageModel.pageSize">
                                    <option value="10">10条Article 10</option>
                                    <option value="30">30条Article 30</option>
                                    <option value="50">50条Article 50</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>ID</th>
                        <th>点检项目名称Routine check item name</th>
                        <th>设备类型Equipment type</th>
                        <th>是否需要填值whether need to fill in the value?</th>
                        <th>是否禁用?Whether Disable</th>
                        <th>操作operation</th>
                    </tr>
                </thead>
                <tbody v-for="(item, index) in pageModel.results">
                    <tr>
                        <td>{{item.ID}}</td>
                        <td>{{item.Name}}</td>
                        <td>
                            <span v-for="(value, key, idx) in typeDictionary">
                                <span v-if="value == item.EquipmentTypeID">{{key}}</span>
                            </span>
                        </td>
                        <td>
                            <span v-for="(value, key, idx) in isDisableDictionary">
                                <span v-if="value == item.IsValue">{{key}}</span>
                            </span>
                        </td>
                        <td>
                            <span v-for="(value, key, idx) in isDisableDictionary">
                                <span v-if="value == item.IsDisable">{{key}}</span>
                            </span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-warning btn-sm" v-if="item.IsDisable == 0" v-on:click="DisableItem(item.ID, true)">
                                <i class="fa fa-close"></i> 禁用Disable
                            </button>
                            <button type="button" class="btn btn-success btn-sm" v-if="item.IsDisable == 1" v-on:click="DisableItem(item.ID, false)">
                                <i class="fa fa-edit"></i> 启用Enable
                            </button>
                            <button type="button" class="btn btn-info btn-sm" v-on:click="EditItem(item.ID)">
                                <i class="fa fa-edit"></i> 编辑edit
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" v-on:click="DeleteItem(item)">
                                <i class="fa fa-trash"></i> 删除delete
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td colspan="9">
                            <nav class="text-right" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li v-if="pageModel.pageIdx > 1">
                                        <a href="#" aria-label="Previous" v-on:click="GotoPage(pageModel.pageIdx - 1)">
                                            <span aria-hidden="true">
                                                <i class="fa fa-angle-left"></i> 上一页previous page
                                            </span>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx != 1">
                                        <a href="#" v-on:click="GotoPage(1)">
                                            <i class="fa fa-step-backward"></i>
                                        </a>
                                    </li>
                                    <template v-for="idx in pageModel.pageLength">
                                        <li v-if="pageModel.pageIdx - idx > -5 && pageModel.pageIdx - idx < 5 " v-bind:class="pageModel.pageIdx == idx ? 'active' : ''">
                                            <a href="#" v-on:click="GotoPage(idx)">{{idx}}</a>
                                        </li>
                                    </template>
                                    <li v-if="pageModel.pageIdx != pageModel.pageLength">
                                        <a href="#" v-on:click="GotoPage(pageModel.pageLength)">
                                            <i class="fa fa-step-forward"></i>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx < pageModel.pageLength">
                                        <a href="#" aria-label="Next" v-on:click="GotoPage(pageModel.pageIdx + 1)">
                                            <span aria-hidden="true">
                                                下一页next page <i class="fa fa-angle-right"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="alert alert-warning alert-dismissible" role="alert">
                <i class="fa fa-warning"></i>
                <p>禁用点检项目，是用于新建点检单模板时不会显示该项目Disabling a routine check item is used to prevent it from being displayed when creating a new routine check doc template。</p>
                <p>禁用点检项目并不会关联点检单模板，如果已保存点检单模板里含有禁用点检项目，则需更新点检单模板才能生效Disabling routine check items will not be associated with the routine check doc template. If the saved routine check doc template contains disabled routine check items, the routine check doc template needs to be updated to take effect。</p>
            </div>
        </div>
    </div>
    <!-- END TABLE -->

</div>


@section scripts{
    <script type="text/javascript" src="~/Scripts/pageJs/RoutineInspection/Item.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
}
